<template>
  <view class="home flex column">
    <scroll-view class="container" :scroll-y="true">
      <div class="row">
        <view class="row-title">企业信息</view>
        <div class="rygl">
          <div class="rygl-item" v-if="hasGGTZ" @click="goMonitor(1)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/monitor-2.svg"></u-image>
            <p class="label">公告通知</p>
          </div>
          <div class="rygl-item" @click="goMonitor(2)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/monitor-1.svg"></u-image>
            <p class="label">煤矿企业</p>
          </div>
          <div class="rygl-item" @click="goMonitor(3)" v-if="isCyry">
            <u-image mode="aspectFit" width="60rpx" height="60rpx" src="/static/image/workbench/person.svg"></u-image>
            <p class="label">从业人员</p>
          </div>
          <div class="rygl-item" @click="goMonitor(4)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx" src="/static/image/workbench/addressList.png"></u-image>
            <p class="label">通讯录</p>
          </div>
        </div>
      </div>

      <div class="row" v-if="isGuard">
        <view class="row-title">智能分析</view>
        <div class="rygl">
          <div v-if="customerAuth" class="rygl-item" @click="goIntelligent(1)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/intelligent-1.svg"></u-image>
            <p class="label">智能侦测</p>
          </div>
          <div v-if="!customerAuth" class="rygl-item" @click="goIntelligent(2)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/intelligent-1.svg"></u-image>
            <p class="label">智能侦测(矿)</p>
          </div>
          <div v-if="customerAuth" class="rygl-item" @click="goIntelligent(3)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/intelligent-3.png"></u-image>
            <p class="label">处置统计</p>
          </div>
        </div>
      </div>

      <div class="row" v-if="hasCJT">
        <view class="row-title title-5">采掘通</view>
        <div class="rygl">
          <div class="rygl-item" @click="goExcavation(1)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/excavation-1.png"></u-image>
            <p class="label">采掘预警</p>
          </div>
          <div class="rygl-item" @click="goExcavation(2)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/excavation-2.png"></u-image>
            <p class="label">采掘查询</p>
          </div>
          <div class="rygl-item" @click="goExcavation(3)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/excavation-3.png"></u-image>
            <p class="label">生产统计</p>
          </div>
          <div class="rygl-item" @click="goExcavation(4)">
            <u-image mode="aspectFit" width="60rpx" height="60rpx"
              src="/static/image/workbench/excavation-4.png"></u-image>
            <p class="label">生产预测</p>
          </div>
        </div>
      </div>

      <!-- <div class="row" >
        <view class="row-title">采掘通</view>
        <div v-if="isJt" class="rygl">
          <div class="rygl-item" @click="goExcavation(5)">
            <view class="img-base">
              <u-image class="img" width="60rpx" height="60rpx" src="/static/image/workbench/base_icon.svg"></u-image>
            </view>
            <p class="label">基本情况</p>
          </div>
          <div class="rygl-item" @click="goExcavation(6)">
            <view class="img-base">
              <u-image class="img" width="60rpx" height="60rpx"
                src="/static/image/workbench/production_icon.svg"></u-image>
            </view>
            <p class="label">生产情况</p>
          </div>
          <div class="rygl-item" @click="goExcavation(7)">
            <view class="img-base">
              <u-image class="img" width="60rpx" height="60rpx" src="/static/image/workbench/report_icon.svg"></u-image>
            </view>
            <p class="label">填报情况</p>
          </div>
          <div class="rygl-item" @click="goExcavation(8)">
            <view class="img-base">
              <u-image class="img" width="60rpx" height="60rpx" src="/static/image/workbench/alarm_icon.svg"></u-image>
            </view>
            <p class="label">报警情况</p>
          </div>
        </div>

        <div v-else class="rygl">
          <div class="rygl-item" @click="goExcavation(9)">
            <view class="img-base">
              <u-image class="img" width="40rpx" height="40rpx"
                src="/static/image/pz/workbench/base_icon.png"></u-image>
            </view>
            <p class="label">煤矿信息</p>
          </div>
        </div>
      </div> -->

      <div class="row">
        <view class="row-title">监测监控</view>
        <div class="rygl">
          <div class="rygl-item" @click="goMonitor(5)">
            <u-image mode="aspectFit" width="40rpx" height="40rpx"
              src="/static/image/workbench/monitor-5.png"></u-image>
            <p class="label">人员轨迹历史</p>
          </div>
        </div>

      </div>
    </scroll-view>
    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>
  </view>
</template>

<script>
export default {
  name: "index",
  data () {
    return {
      barList: [],
      personnelInfo: {},
      customerAuth: false,
      isJt:false,
    };
  },
  methods: {
    /**
     * 获取用户信息,更新cid
     */
    async getUserInfo () {
      const res = await this.$post("/mobile/userInfo/getUserInfo");
      if (res?.body) {
        this.personnelInfo = res.body;
      }
    },
    goMonitor (type) {
      let url = "";
      if (type === 1) {
        uni.navigateTo({
          url: "/pages/publicNotice/index",
        });
      } else if (type === 2) {
        if (this.personnelInfo.dataType === "3") {
          // 企业账号
          url = "/pages/firmInfo/customerIndex";
        } else {
          // 集团账号
          url = "/pages/firmInfo/index";
        }
        uni.navigateTo({
          url: url,
        });
      } else if (type === 3) {
        uni.navigateTo({
          url: `/pages/practitioner/index`,
        });
      } else if (type === 4) {
        uni.navigateTo({
          url: `/pages/addressList/index`,
        });
      } else if (type === 5) {
        uni.navigateTo({
          url: `/pages/personnelLocation/index`,
        });
      }
    },
    goIntelligent (type) {
      if (type === 1) {
        uni.navigateTo({
          url: `/pages/intelligentDetection/index`,
        });
      } else if (type === 2) {
        uni.navigateTo({
          url: `/pages/intelligentDetection/mine/index`,
        });
      } else if (type === 3) {
        uni.navigateTo({
          url: `/pages/intelligentDetection/disposalStatistics/index`,
        });
      }
    },
    goExcavation (type) {
      if (type === 1) {
        uni.navigateTo({
          url: `/pages/earlyWarning/index`,
        });
      } else if (type === 2) {
        uni.navigateTo({
          url: `/pages/miningQuery/index`,
        });
      } else if (type === 3) {
        uni.navigateTo({
          url: `/pages/produce/statistics`,
        });
      } else if (type === 4) {
        uni.navigateTo({
          url: `/pages/produce/calculate`,
        });
      } else if (type === 5) {
        uni.navigateTo({
          url: `/pages/cjt/basicInformation/index`,
        });
      } else if (type === 6) {
        uni.navigateTo({
          url: `/pages/cjt/productionSituation/index`,
        });
      } else if (type === 7) {
        uni.navigateTo({
          url: `/pages/cjt/fillSituation/index`,
        });
      } else if (type === 8) {
        uni.navigateTo({
          url: `/pages/cjt/alarmSituation/index`,
        });
      } else if (type === 9) {
        this.$post("/cjt/app/getCustomerInfoList", { customerId: getApp().globalData.userInfo.customerId }).then((res) => {
          uni.navigateTo({
            url: `/pages/cjt/basicInformation/mineList/detail?item=${JSON.stringify(res.body.content[0])}`,
          });
        })
      }
    },
  },
  computed: {
    isCyry () {
      return getApp().globalData.isCyry;
    },
    midButton () {
      return getApp().globalData.tabbarMidButton;
    },
    isGuard () {
      return getApp().globalData.isGuard;
    },
    hasCJT () {
      return getApp().globalData.cjtAuth;
    },
    hasGGTZ () {
      return getApp().globalData.ggtzAuth;
    },
  },
  onShow () {
    this.getUserInfo();
  },
  onLoad () {
    this.customerAuth = getApp().globalData.userInfo.customerAuth;
    this.barList = getApp().globalData.list;
    this.isJt = getApp().globalData.userInfoData.customer.data_type=='2'? true : false
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  color: #fff;
  background-size: 100% 100%;
  background-color: #0d1a51;
  background-image: url('/static/image/bg.png');
  padding-top: 40rpx;
}

.container {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  // padding-top: 50px;
}

.row {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 80rpx;
  margin: 40rpx 30rpx 0;
  height: 200rpx;
  background-size: 100% 100%;
  .row-title::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 55%;
    width: 4rpx;
    transform: translateY(50%);
    background-color: #2979ff;
  }

  .row-title {
    font-weight: bold;
    font-size: 30rpx;
    position: relative;
    margin-bottom: 10px;
    padding-left: 22rpx;
    color: #2979ff;
  }

  &:first-child {
    margin-top: 0;
  }
}

/deep/ .u-border-bottom:after {
  border-bottom-width: 0px;
}

.rygl {
  display: grid;
  flex: 1;
  overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 10rpx;
  width: 100%;
  background: #00000057;
  box-shadow: 0 0 20rpx 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
}

.rygl-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .label {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #fff;
  }
}
</style>
